{% extends 'base_my_center.html' %}
{% block link_css %}
        <script type="text/javascript" src="/static/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="/static/js/user_follow.js"></script>
    <style type="text/css">

        .tab_css {
            color: #31c27c;
            display: none;

        }
    </style>
    <script type="text/javascript">
        var myclick = function (v) {
            var llis = document.getElementsByTagName("span");
            for (var i = 0; i < llis.length; i++) {
                var lli = llis[i];
                if (lli == document.getElementById("tab" + v)) {
                    lli.style.color = "#61bd7c";
                } else {
                    lli.style.color = "black";
                }
            }
            var divs = document.getElementsByClassName("tab_css");
            for (var i = 0; i < divs.length; i++) {
                var divv = divs[i];
                if (divv == document.getElementById("tab" + v + "_content")) {
                    divv.style.display = "block";
                } else {
                    divv.style.display = "none";
                }
            }
        }
    </script>

{% endblock %}

{% block content %}
    <div class="main main--profile" style="">
        <div class="mod_tab profile_nav" role="nav" id="nav">
            <a class="mod_tab__item mod_tab__current" href="{{ url('users:i_like') }}" >我喜欢</a>
            <a class="mod_tab__item" href="{{ url('users:center') }}" >我创建的歌单</a>
            <a class="mod_tab__item " href="{{ url('users:follow') }}" >关注</a>
            <a class="mod_tab__item" href="javascript:;">粉丝</a>
            <a class="mod_tab__item" href="{{ url('users:user_modify') }}">个人设置</a>
            <a class="mod_tab__item" href="javascript:;"style="display:none;">主播电台</a>
        </div>


        <div class="js_box" id="like_box" style="display: block;">
            <div class="mod_tab" role="nav">
                <span class="mod_tab__item mod_tab__current" href="javascript:;" id="tab1" onclick="myclick(1)">歌曲 {{ song_count }}</span>
                <span class="mod_tab__item" href="javascript:;" id="tab2" onclick="myclick(2)">歌单 {{ song_list_count }}</span>
                <span class="mod_tab__item" href="javascript:;" id="tab3" onclick="myclick(3)">专辑 {{ album_count }}</span>

            </div>
            <div class="profile_cont">

                <div class="js_sub tab_css" id="tab1_content" style="display: block">
                    <div class="mod_songlist_toolbar">
                        <a href="javascript:;" class="mod_btn_green js_all_play"
                           data-stat="y_new.profile.like.song.playall"><i class="mod_btn_green__icon_play"></i>播放全部</a>
                        <a href="javascript:;" class="mod_btn js_all_fav" data-stat="y_new.profile.like.song.addall"><i
                                class="mod_btn__icon_add"></i>添加到</a>
                        <a href="javascript:;" class="mod_btn js_all_down"
                           data-stat="y_new.profile.like.song.downloadall"><i class="mod_btn__icon_down"></i>下载</a>
                        <a href="javascript:;" class="mod_btn js_batch" data-stat="y_new.profile.like.song.batch"><i
                                class="mod_btn__icon_batch"></i>批量操作</a>
                    </div>
                    <div class="mod_songlist">
                        <ul class="songlist__header">
                            <li class="songlist__edit songlist__edit--check sprite">
                                <input type="checkbox" class="songlist__checkbox js_check_all">
                            </li>
                            <li class="songlist__header_name">歌曲</li>
                            <li class="songlist__header_author">歌手</li>
                            <li class="songlist__header_album">专辑</li>
                            <li class="songlist__header_time">时长</li>
                        </ul>

                            <ul class="songlist__list">
                            {% for x in user_like %}
                                {% if not x.song_list_id %}
                                <li>
                                    <div class="songlist__item">
                                        <div class="songlist__edit songlist__edit--check sprite">
                                        <input type="checkbox" class="songlist__checkbox">
                                        </div>
                                        <div class="songlist__songname">



                                        <span class="songlist__songname_txt"><a href="/song_details/?id={{ x.song_id }}" class="js_song" title="{{x.song_name}} ">{{x.song_name}}</a></span>
                                        <div class="mod_list_menu">
                                            <a href="/player/?id={{ x.song_id }}" class="list_menu__item list_menu__play js_play" title="播放">
                                            <i class="list_menu__icon_play"></i>
                                            <span class="icon_txt">播放</span>
                                            </a>
                                            <a href="javascript:;" class="list_menu__item list_menu__add js_fav" title="添加到歌单" aria-haspopup="true">
                                            <i class="list_menu__icon_add"></i>
                                            <span class="icon_txt">添加到歌单</span>
                                            </a>

                                            <a href="javascript:;" class="list_menu__item list_menu__down js_down" title="VIP下载" aria-haspopup="true" data-target="menu_down">
                                                <i class="list_menu__icon_down_vip"></i>
                                                <span class="icon_txt">VIP下载</span>
                                            </a>

                                            <a href="javascript:;" class="list_menu__item list_menu__share js_share" title="分享" aria-haspopup="true">
                                            <i class="list_menu__icon_share"></i>
                                            <span class="icon_txt">分享</span>
                                            </a>
                                        </div>
                                        </div>

                                        <div class="songlist__artist" title="{{x.song_singer}}">


                                        <a href="/singers_detail/?id={{ x.song_singer_id }}" data-singermid="002etq000Idrvg" data-singerid="2743368" title="{{x.song_singer}}" class="singer_name">{{x.song_singer}}</a>

                                        </div>
                                        <div class="songlist__album">
                                        <a data-albummid="000s5naV1aawT7" data-albumid="6544096" href="/albums_detail/?id={{ x.song_album_id }}" title="{{x.song_album}}" class="album_name">{{x.song_album}}</a>
                                        </div>
                                        <div class="songlist__time">04:15</div>
                                        <div class="songlist__other">

                                        </div>

                                           <a href="javascript:;" class="songlist__delete del_like" title="删除" song_id="{{ x.song_id }}" user_id="{{ user_id }}" ><span class="icon_txt">删除</span></a>

                                    </div>
                                </li>
                                {% endif %}
                            {% endfor %}


                            </ul>

                        </div>

                </div>

                <div class="js_sub tab_css" id="tab2_content">
                    <div class="style_switch" aria-label="排列方式">
                        <a href="javascript:;" class="style_switch__item" title="上图下文" data-type="mod_playlist"
                           data-tab="like_playlist" data-stat="y_new.profile.like.playlist.pic_mod"><i
                                class="icon_style_pic sprite"></i><span class="icon_txt">上图下文</span></a>
                        <a href="javascript:;" class="style_switch__item style_switch__item--select" title="列表"
                           data-type="mod_playlist_text" data-tab="like_playlist"
                           data-stat="y_new.profile.like.playlist.list_mod"><i class="icon_style_list sprite"></i><span
                                class="icon_txt">列表</span></a>
                    </div>

                    <div class="mod_playlist_text js_list" style="display:;">
                        <ul class="playlist__header">
                            <li class="playlist__header_name">歌单</li>
                            <li class="playlist__header_number">曲目数</li>
{#                            <li class="playlist__header_author">创建人</li>#}
                            <li class="playlist__header_other">收听</li>
                        </ul>
                        <ul class="playlist__list">
                            {% for x in song_list %}
                            {% if x.playlist_id %}
                            <li class="playlist__item" data-disstid="7450766842"
                                onmouseover="this.className=(this.className+&#39; playlist__item--hover&#39;)"
                                onmouseout="this.className=this.className.replace(/ playlist__item--hover/, &#39;&#39;)">
                                <div class="playlist__cover">


                                    <a href="/song_list/?id={{ x.playlist_id }}" class="js_playlist">
                                        {% if not x.playlist_pic %}
                                        <img src="/static/300"
                                             onerror="this.src=&#39;//y.gtimg.cn/mediastyle/global/img/cover_playlist.png?max_age=31536000&#39;;this.onerror=null;"
                                             alt="甜美女声 ：沦陷该死的温柔" class="playlist__pic">
                                        {% else %}
                                            <img src="{{ x.playlist_pic }}" alt="{{ x.playlist_name }}" class="playlist__pic">
                                            {% endif %}
                                    </a>

                                </div>
                                <h4 class="playlist__title">
					<span class="playlist__title_txt">

						<a href="/song_list/?id={{ x.playlist_id }}" class="js_playlist" title="{{ x.playlist_name }}">{{ x.playlist_name }}</a>

					</span>
                                </h4>
                                <div class="mod_list_menu">

                                    <a href="javascript:;" class="list_menu__item list_menu__play js_play"
                                       data-stat="y_new.profile.like.playlist.play" title="播放">
                                        <i class="list_menu__icon_play"></i>
                                        <span class="icon_txt">播放</span>
                                    </a>
                                    <a href="javascript:;" class="list_menu__item list_menu__add js_fav" title="添加到歌单">
                                        <i class="list_menu__icon_add"></i>
                                        <span class="icon_txt">添加到歌单</span>
                                    </a>
                                    <a href="javascript:;" class="list_menu__item list_menu__down js_down" title="下载">
                                        <i class="list_menu__icon_down"></i>
                                        <span class="icon_txt">下载</span>
                                    </a>
                                    <a href="javascript:;" class="list_menu__item list_menu__share js_share" title="分享">
                                        <i class="list_menu__icon_share"></i>
                                        <span class="icon_txt">分享</span>
                                    </a>

                                </div>
                                <div class="playlist__number">
                                    {{ x.playlist_song_count }}
                                </div>
{#                                <div class="playlist__author">#}
{#                                    <a title="陌♡离" class="js_user"#}
{#                                       href="https://y.qq.com/portal/profile.html?uin=oKcl7iEAoioloc**"#}
{#                                       data-uin="oKcl7iEAoioloc**">陌♡离</a>#}
{#                                </div>#}
                                <div class="playlist__other">
                                    {{ x.playlist_play_count }}
                                </div>
                                <a href="javascript:;" class="playlist__delete del_song_like" playlist_id="{{ x.playlist_id }}" user_id="{{ x.users_id }}"><span class="icon_txt">删除</span></a>
                            </li>

                            {% endif %}
                            {% endfor %}
                        </ul>
                    </div>


                </div>

                <div class="js_sub tab_css" id="tab3_content">
                    <div class="mod_playlist_text js_list" style="display:;">
                        <ul class="playlist__header">
                            <li class="playlist__header_name">专辑</li>
                            <li class="playlist__header_number">曲目数</li>
                            <li class="playlist__header_author">歌手</li>
                            <li class="playlist__header_other">发行时间</li>
                        </ul>
                        <ul class="playlist__list">
                            {% for x in album_list %}
                            <li class="playlist__item"
                                onmouseover="this.className=(this.className+' playlist__item--hover')"
                                onmouseout="this.className=this.className.replace(/ playlist__item--hover/, '')">
                                <div class="playlist__cover"><a href="/albums_detail/?id={{ x.album_id }}" class="js_album"><img src="{{ x.album_pic }}"
                                        onerror="this.src='//y.gtimg.cn/mediastyle/global/img/album_300.png?max_age=31536000';this.onerror=null;"
                                        alt="{{ x.album_name }}" class="playlist__pic"></a></div>
                                <h4 class="playlist__title"><span class="playlist__title_txt"><a
                                        href="/albums_detail/?id={{ x.album_id }}" class="js_album" title="{{ x.album_name }}">{{ x.album_name }}</a></span></h4>
                                <div class="mod_list_menu">
                                    <a href="javascript:;" class="list_menu__item list_menu__play js_play" title="播放"
                                       data-stat="y_new.profile.like.album.play">
                                        <i class="list_menu__icon_play"></i>
                                        <span class="icon_txt">播放</span>
                                    </a>
                                    <a href="javascript:;" class="list_menu__item list_menu__add js_fav" title="添加到歌单">
                                        <i class="list_menu__icon_add"></i>
                                        <span class="icon_txt">添加到歌单</span>
                                    </a>
                                    <a href="javascript:;" class="list_menu__item list_menu__down js_down" title="下载">
                                        <i class="list_menu__icon_down"></i>
                                        <span class="icon_txt">下载</span>
                                    </a>
                                    <a href="javascript:;" class="list_menu__item list_menu__share js_share" title="分享">
                                        <i class="list_menu__icon_share"></i>
                                        <span class="icon_txt">分享</span>
                                    </a>
                                </div>
                                <div class="playlist__number">
                                    {{ x.album_song_count }}首
                                </div>
                                <div class="playlist__author">
                                    <a href="/singers_detail/?id={{ x.singer_id }}" class="js_singer"
                                       data-singermid="000qlqyi0PGkAz" title="{{ x.singer_name }}">{{ x.singer_name }}</a>
                                </div>
                                <div class="playlist__other">
                                    {{ x.issue_time }}
                                </div>
                                <a href="javascript:;" class="del_album playlist__delete" album_id='{{ x.album_id }}' user_id="{{ x.users_id }}"><span class="icon_txt">删除</span></a>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>

                    
                </div>


            </div>

        </div>


    </div>
{% endblock %}

